<template>
	<view class="container">

<!--		<view>-->
<!--			<text class="title">充值类型</text>-->
<!--			<view class="type-container">-->
<!--				<picker @change="onPickerChange" :value="selectedType" :range="memberList" range-key="name">-->
<!--					<view class="picker">-->
<!--						<text v-if="!memberList[selectedType]">请选择</text>-->
<!--						<text v-else>-->
<!--							<text style="color: grey;">已选择：</text>-->
<!--							<text style="font-size: 30rpx;color: #33333;">{{memberList[selectedType].name}}</text>-->
<!--						</text>-->
<!--					</view>-->
<!--				</picker>-->
<!--			</view>-->
<!--		</view>-->

		<view class="money-container">
			<text class="title">充值金额</text>
			<view class="content">
				<view class="item" :class="{'checked': price == selectedAmount}"
					  v-for="(price,index) in moneyList" :key="index"
					  @click.native="handleClick(price)">
					<text :class="{'checked-text': price == selectedAmount}">{{price || 0}}元</text>
				</view>
<!--				<view class="item" >-->
<!--					<text class="checked-text">100元</text>-->
<!--				</view>-->
			</view>
		</view>

		<view class="pay-way">
			<text class="title">支付方式</text>
			<view class="content">
				<view class="left">
					<image style="width: 41rpx;height: 36rpx" src="../../static/images/weixinzhifu.png"/>
					<text>微信支付</text>
				</view>
				<view class="checkbox">
					<view class="checkbox-content bg-checked">
						<u-icon name="checkbox-mark" style="margin-bottom: 9rpx;"
								color="#ffffff" size="20"></u-icon>
					</view>
				</view>
			</view>
		</view>

		<view class="footer-container">
			<view class="inner-container">
				<view class="price-container">
					<text>充值金额：</text>
					<text class="price-text">￥{{selectedAmount}}</text>
<!--					<text class="price-text">￥100</text>-->
				</view>
<!--				<button :disabled="submitBtnDisable" class="submit-button" @click="buildRechargeOrder">充值</button>-->
				<button :disabled="submitBtnDisable" class="submit-button" @click="buildRechargeOrder">充值</button>
			</view>
		</view>

	</view>
</template>

<script>
    // import {buildOrder} from "../../api";
	// import {Order} from "../../model/order";
	// import {Payments} from "../../model/payments";

	export default {
		data() {
			return {
				moneyList: [],
				selectedAmount: '',
				submitBtnDisable: false,
				memberList: [],
				selectedType: 0
			}
		},
		onShow() {
			this.rechargeRuleList();
			// this.disableSubmitBtn();
		},
		methods: {
			async rechargeRuleList(){
				let params = {
					user_token: wx.getStorageSync("userToken")
				}
				const res = await this.$api.getRechargeRuleList(params,this.$baseUrl)
				if (res.data.level == 'success') {
					this.moneyList = res.data.data
				} else {
					this.$currency.showToast(res.data.message)
				}
			},
			handleClick(item) {
				this.enableSubmitBtn();
				this.selectedAmount = item
			},

			buildRechargeOrder(){
				let amount = this.selectedAmount;
				if (!this.selectedAmount) {
					this.$currency.showToast('请选择充值金额')
					this.disableSubmitBtn();
					return
				}
				this.payment(amount);
			},
			//支付
			async payment(amount){
				let _this=this
				var userToken=wx.getStorageSync('userToken')
				let res=await this.$api.buildBalanceOrder({
					amount:amount,
					user_token:userToken
				},this.$baseUrl)
				if(res.data.level=="success"){
					let data=res.data.data
					wx.requestPayment({
						timeStamp: data.timeStamp,
						nonceStr: data.nonceStr,
						package: data.package,
						signType: data.signType,
						paySign: data.paySign,
						success() {
							wx.showToast({
								title: '支付成功',
								icon: 'success',
								duration: 1500
							})
							setTimeout(()=>{
								wx.navigateBack({
									delta: 1
								})
							},1500)
						},
						fail(res) {
							wx.showToast({
								title: '取消支付',
								icon: 'none',
								duration: 1500
							})
							setTimeout(()=>{
								wx.navigateBack({
									delta: 1
								})
							},1500)
						}
					})
				} else{
					wx.showToast({
						title: res.data.message,
						icon: 'none'
					})
				}

			},
			//
			// //初始化当前页面的数据
			// initMoneyListData(index) {
			// 	const amountList = this.memberList[index].amount.map(item => {
			// 		return item
			// 	});
			// 	this.moneyList =amountList
			// 	this.selectedAmount = ''
			// },
			//
			//
			// async getMemberList() {
			// 	const res = await this.$api.getMemberList()
			// 	if (res.data.level == 'success') {
			// 		this.memberList = res.data.data
			// 		this.initMoneyListData(0)
			// 	} else {
			// 		this.$currency.showToast(res.data.message)
			// 	}
			// },
			//
			//解除禁用提交按钮
			enableSubmitBtn() {
				this.submitBtnDisable = false
			},
			//
			//禁用提交按钮
			disableSubmitBtn() {
				this.submitBtnDisable = true
			},
			//
			// async buildRechargeOrder() {
			// 	if (!this.selectedAmount) {
			// 		this.$currency.showToast('请选择充值金额')
			// 		return
			// 	}
			// 	const result = this.moneyList.find(m => m == this.selectedAmount)
			// 	if (!result) {
			// 		throw new Error('所选的充值金额不在不在moneyList内')
			// 	}
			// 	this.disableSubmitBtn();
			// 	try {
			// 		const member = this.memberList[this.selectedType]
			// 		const params = {
			// 			member_id: member.id,
			// 			buy_type: 'member',
			// 			amount: this.selectedAmount,
			// 			pay_way: Payments.PAY_WAY_ENUM.WX
			// 		}
			// 		const result = await buildOrder(params)
			// 		if (result.data.level == 'success') {
			// 			const orderData = result.data.data
			// 			await this.pay(orderData.order_num);
			// 		} else {
			// 			this.$currency.showToast(result.data.message)
			// 		}
			// 	} catch (e) {
			//
			// 	} finally {
			// 		this.enableSubmitBtn()
			// 	}
			// },
			//
			// //获取支付参数 进行支付
			// async pay(order_num) {
			// 	try {
			// 		const payment = new Payments()
			// 		const payParams = await payment.getPaymentParams(order_num)
			// 		const res = await wx.requestPayment(payParams)
			// 		this.$currency.showToast('支付成功','success')
			// 	} catch (e) {
			// 		this.$currency.showToast('支付失败')
			// 	}
			// 	this.enableSubmitBtn()
			// },
			//
			// onPickerChange(event) {
			// 	this.selectedType = event.detail.value
			// 	this.initMoneyListData(this.selectedType)
			// }

		}
	}
</script>
<style>
	page {
		background-color: #ffffff !important;
	}
</style>
<style scoped lang="scss">

	.container {
		.title {
			display: block;
			padding: 30rpx;
			font-size: 32rpx;
			font-weight: bold;
		}
		.type-container {
			padding: 30rpx 0;
			padding-left: 40rpx;
		}
		.money-container {
			box-sizing: border-box;
			.content {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				justify-content: flex-start;
				padding: 0 40rpx;
			}
			.item {
				min-width: 145rpx;
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				background-color: #fdf7e4;
				border-radius: 5rpx;
				margin-bottom: 20rpx;
				margin-right: 20rpx;
				padding: 0 25rpx;
				text:first-child {
					color: #333333;
					font-size: 32rpx;
					font-weight: bold;
				}
				.checked-text {
					color: #ffffff !important;
				}
			}
			.checked {
				background-color: #f8ac00;
			}
		}

		.pay-way {
			.content {
				width: 720rpx;
				height: 100rpx;
				box-sizing: border-box;
				border-radius: 60rpx;
				padding: 0 30rpx;
				border: 2rpx solid #f8ac00;
				margin: 0 auto;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.left {
					display: flex;
					align-items: center;
					image {
						margin-right: 16rpx;
					}
					text {
						font-size: 30rpx;
					}
				}
				.checkbox {
					display:flex;
					flex-direction:row;
					align-items:center;
					justify-content:center;
					.checkbox-content{
						width: 35rpx;
						height: 35rpx;
						border-radius: 50%;
						box-sizing: border-box;
						display:flex;
						flex-direction:row;
						align-items:center;
						justify-content:center;
					}

					.bg-checked{
						background-color: #f8ac00;
					}

					.bg-unchecked{
						background-color: #FFFFFF;
						border: 1rpx solid grey;
					}
				}
			}
		}

		.footer-container {
			width: 100vw;
			position: fixed;
			z-index: 101;
			bottom: 0;
			left: 0;

			.inner-container {
				box-sizing: border-box;
				height: 100rpx;
				width: 100%;
				background-color: #ffffff;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				padding-left: 30rpx;
				padding-right: 20rpx;
				box-shadow: 0px 0px 4px 0px rgba(210, 210, 210, 0.5);
				.price-container {
					display: flex;
					flex-direction: row;
					align-items: center;
					color: #333333;
					font-size: 28rpx;
					.price-container > text {
						margin-right: 20rpx;
					}
					.price-text {
						color: #f2270c !important;
						font-weight: 700;
					}
				}

				.submit-button {
					font-size: 30rpx;
					color: #fff;
					width: 240rpx;
					height: 70rpx;
					background-color: #f8ac00;
					border-radius: 50rpx;
					text-align: center;
					line-height: 70rpx;
					margin-right: 0;
				}
			}

		}

	}

</style>
